<template>
    <div class="topic-relate-btn-div">
        <el-button type="primary" @click="showTopicRelateList">会商</el-button>
        <el-dialog :visible.sync="topicRelateListDialogVisible" width="1000px">
            <avue-crud :data="topicRelateList"
                       :page.sync="topicRelatePage"
                       :option="option"
                       :table-loading="tableLoading"
                       @refresh-change="refreshTopicRelate"
                       @on-load="pageTopicRelate">
                <template slot="menuLeft">
                    <el-button v-if="addBtnVisible"
                               type="primary"
                               size="small"
                               icon="el-icon-plus"
                               @click="showAddForm">新增</el-button>
                </template>
                <template slot-scope="scope"
                          slot="menu">
                    <el-button type="text"
                               icon="el-icon-view"
                               size="mini"
                               plain
                               @click="showTopic(scope.row,scope.index)">查看
                    </el-button>
                </template>
            </avue-crud>
        </el-dialog>
          <add-topic-form :task-id="taskId"
                          :visible.sync="addDialogVisible"
                          @after-add="pageTopicRelate(topicRelatePage)">
          </add-topic-form>
        <view-topic :visible.sync="viewTopicDialogVisible"
                    :business-id="businessId"
                    :type="type"
                    :topic-id="currentTopicId"
                    :dept-name="currentDeptName"
                    :task-id="taskId">
        </view-topic>
    </div>
</template>

<script>
    import {pageTopicRelate} from "@/api/planning/project";
    import addTopicForm from "@/components/activiti/topic-relate-button/addTopicForm"
    import viewTopic from "@/components/activiti/topic-relate-button/viewTopic"

    //会商按钮
    export default {
        name: "topicRelateBtn",
        components:{
            addTopicForm,
            viewTopic
        },
        props:{
            //A:规划登记  B:清单   参考后台枚举类：com/bostech/pums/planning/api/entity/enums/PlanningTopicTypeEnum.java
            type:{
                type: String,
                required: true
            },
            businessId: {
                type: [String, Number],
                required: true
            },
            taskId:{
                type: String,
                required: true
            },
            addBtnVisible:{
                type: Boolean,
                default: true
            }
        },
        data(){
            return {
                topicRelateList: [],
                topicRelatePage:{
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 5, // 每页显示多少条,
                    pageSizes: [5, 10, 20, 30, 40, 50, 100],
                    isAsc: false//是否倒序
                },
                tableLoading: false,
                option: {
                    page: true,
                    addBtn: false,
                    editBtn: false,
                    addRowBtn: false,
                    indexLabel: "序号",
                    index: true,
                    indexWidth:70,
                    cellBtn: false,
                    delBtn: false,
                    columnBtn: false,
                    refreshBtn: true,
                    filterBtn: false,
                    searchBtn: false,
                    menuWidth: 100,
                    keyId: "id",
                    column: [
                        {
                            label: "发起会商环节",
                            prop: "taskName",
                            cell: true,
                        },
                        {
                            label: "会商部门名称",
                            prop: "deptName",
                            width: 240,
                            cell: true,
                        },
                        {
                            label: "反馈截止时间",
                            prop: "endDate",
                            cell: true,
                        },
                        {
                            label: "创建时间",
                            prop: "createTime",
                            width: 200,
                            cell: true,
                        },
                    ]
                },
                topicRelateListDialogVisible: false,
                addDialogVisible: false,
                addDialogBtnLoading: false,
                deptSelectVisible: false,
                deptNames: null,
                addForm:{
                    deptIds: null
                },
                addFormRules:{
                    deptIds: [
                        { required: true, message: '请选择会商部门' , trigger: "blur" },
                    ]
                },
                viewTopicDialogVisible: false,
                currentTopicId: null,
                currentDeptName: null,
            };
        },
        watch:{
            topicRelateListDialogVisible(){
                if (this.topicRelateListDialogVisible) {
                    this.pageTopicRelate(this.topicRelatePage);
                }
            }
        },
        methods: {
            showTopicRelateList() {
                this.topicRelateListDialogVisible = true;
            },
            refreshTopicRelate({page,searchForm}){
                this.pageTopicRelate(page);
            },
            pageTopicRelate(page) {
                //防止首次加载时，请求两次。avue自动请求一次，topicRelateListDialogVisible变更触发一次
                if (this.tableLoading) {
                    return;
                }
                this.tableLoading = true;
                let params = {
                    current: page.currentPage,
                    size: page.pageSize,
                    businessId: this.businessId,
                    type: this.type
                }
                pageTopicRelate(params).then((res) => {
                    if (res.data.code == 0) {
                        this.topicRelateList = res.data.data.records;
                        this.topicRelatePage.total = res.data.data.total;
                    }
                }).finally(() => {
                    this.tableLoading = false;
                });
            },
            showAddForm(){
                this.addDialogVisible = true;
            },
            showTopic(row, index) {
                this.viewTopicDialogVisible = true;
                this.currentTopicId = row.topicId;
                this.currentDeptName = row.deptName;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .topic-relate-btn-div{
        margin-left: 10px;
    }
</style>
